今天想不到要寫啥! 決定來練習個國民習題 Shopping Cart。
這篇主要是想試試看 ion-slide 元件，去用翻的方式顯示產品。

後端 API 準備

Product Model

    public class ProductModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
        public int Amount { get; set; }
    }

Get Product API ，這很純粹就是從後端取得商品資訊。

Shopping Cart 商品 Slide 實作

shopping.service.ts 主要來抽出部分 shopping cart 的商業邏輯。
這支除了有去 call 取得商品 API 之外，另外一個就是 cart 這個陣列。

shopping.page.html 最主要是想要試試這個 ion-slide 元件。
第 25 行中 #slider 的設置是為了商品分類下拉之後去得該分類的商品資料，之後將 Slide 移到第一頁用的。
shopping.page.ts 會使用 ViewChild 的方式取得 slide 的設置。
第 25 行中 [options]="slideOpts" 則是對於 slide 的一些條件設置。 以下我只有設置初始在第 0 頁，轉頁速度 400 。

  slideOpts = {
    initialSlide: 0,
    speed: 400,
  };

上面商品類別使用了 ion-select 。是 alert 的 interface。
而其實下方的商品數量也有用一個 ion-select ，只是下面那個是 action-sheet 的 interface。

shopping.page.ts
這邊的重點，剛剛有提到 ViewChild 的方式取得 slide ，然後商品分類下拉之後去得該分類的商品資料，之後將 Slide 移到第一頁用的。

shopping.page.ts addCart 方法
這邊的邏輯也很簡單，如果沒有該選擇的商品就新增，如果存在的話就直接在數量上加總。
這邊要注意的點應該是 因為 ion-select 顯示商品數量下拉，要注意要額外設置一個 number 的陣列去當 Model 。不然 ion-select 預設會讓 Amount 變成 string 。
還有就是 列表上的商品，跟要加入到購物車裡的商品，是不一樣的東西。 在下圖中，66 行，因為列表上的商品被選完加入了購物車，數量要清為 0，不然頁面上會看到上次選擇的數量，或是加總過後詭異的數量，另外，我預設使用者只能同一種商品最多選 4 個，所以這兩種意義上不同的商品一定要分開。

結果
展示分類查詢，還有 Slide 顯示商品。商品數量下拉 action-sheet 的 interface 也是個亮點。